<template>
  <a-modal
    :mask-closable="false"
    v-model:visible="visible"
    width="800"
    :on-before-ok="handleOk"
    @handleCancel="handleCancel"
    ok-text="确定"
    title-align="start"
    class="overflow-hidden"
  >
    <template #title>{{ props.operation == "edit" ? "修改商品" : "添加商品" }}</template>
    <a-scrollbar style="overflow: auto" class="h-[200px]">
      <a-form class="close-form" :rules="rules" :model="form" ref="editformref">
        <a-form-item field="shopname" label="商品名称" asterisk-position="end">
          <a-input v-model="form.shopname" placeholder="必填" />
        </a-form-item>
        <a-form-item field="price" label="价格" asterisk-position="end">
          <a-input v-model="form.price" placeholder="必填" />
        </a-form-item>
        <div class="flex">
          <div class="w-[20%] ml-[20px] text-[rgb(78,89,105)] text-[14px]">上传图片</div>
          <a-upload
            list-type="picture-card"
            :limit="1"
            :file-list="imgList"
            :default-file-list="imgList"
            @change="getObject"
            image-preview
          />
        </div>
      </a-form>
    </a-scrollbar>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { FileItem, Message } from "@arco-design/web-vue";
import { addshop, editshop, getshopdetail } from "@/api/shop";
import { loadImg } from "@/pulicFun/loadImg";
const emits = defineEmits(["close", "getList"]);
const props = defineProps({
  shopId: {
    type: Number,
    default: 1,
  },
  operation: {
    type: String,
    default: "add",
  },
});
const visible = ref(false);
const imgurl = ref([]);
const editformref = ref();
const imgList = ref<FileItem[]>([
  {
    uid: "1",
    url: "",
  },
]);
const type = ref(props.operation);
const fileList: any = ref([]);
const form = ref({
  id: props.shopId,
  shopname: "",
  price: "",
});
const rules = {
  shopname: [{ required: true, message: "此选项必填" }],
  price: [{ required: true, message: "此选项必填" }],
};
const handleCancel = () => {
  console.log("999");
  form.value = { id: 0, shopname: "", price: "" };
  imgurl.value = [];
  imgList.value = [];
  emits("close");
};
const handleOk = (done: (closed: boolean) => void | boolean) => {
  editformref.value.validate(async (val: { string: string }) => {
    if (val == undefined) {
      try {
        if (imgurl.value[0]) {
          if (type.value == "edit") {
            let res = await editshop({ ...form.value, imgurl: imgurl.value[0] });
            if (res.code == 200) {
              Message.success("修改成功");
              emits("close");
              emits("getList");
              done(false);
            } else {
              Message.error("修改失败");
              done(false);
            }
          } else {
            // console.log(form.value.imgurl);

            console.log(imgurl.value[0]);
            let res = await addshop({
              shopname: form.value.shopname,
              price: form.value.price,
              imgurl: imgurl.value[0],
            });
            if (res.code == 200) {
              Message.success("添加成功");
              emits("close");
              emits("getList");
              done(false);
            } else {
              Message.error("添加失败");
              done(false);
            }
          }
        }
      } catch (error) {
        done(false);
        console.error(error);
      }
    } else {
      done(false);
    }
  });
};
const getObject = async (lst: string | any[]) => {
  console.log(lst, "lst");
  if (lst && lst.length > 0) {
    try {
      await loadImg(lst[0].file, imgurl.value);

      console.log(imgurl.value, " imgurl.value");
    } catch (error) {
      console.error(error);
    }
    fileList.value = lst[0].file;
  }
};
const getList = async () => {
  try {
    let res = await getshopdetail({
      id: props.shopId,
    });
    if (res.code == 200) {
      console.log(res);
      form.value.price = res.data.price;
      form.value.shopname = res.data.shopname;
      imgList.value[0].url = res.data.imgurl;
      console.log(imgList.value);
    } else {
      Message.error("查询详情失败");
    }
  } catch (error) {
    console.error(error);
  }
};
if (type.value == "edit") {
  getList();
} else {
  imgList.value[0].url = "";
}
</script>
<style lang="less"></style>
